import React, { Component } from 'react'
import Header from '../../components/Header/header';
import { Button, Form, Input, Toast } from "antd-mobile"


import orange_logo from "../../assets/img/pic_logo_orange.png"
import "./register.less"

import { connect } from "react-redux"
import { bindActionCreators } from "redux";
import {actions, getUser} from '../../store/modules/register'

class register extends Component {
  render() {
    const {
      user,
      registerFn: { changeUser, doregister },
      history: { push }
    } = this.props;
    return (
      <div className='firstbox'>
        <Header title="手机注册" back></Header>
        <div>{JSON.stringify(user)}</div>
        <img src={orange_logo} alt="" />
        <Form layout='horizontal'>
          <Form.Item label="手机号">
            <Input
              placeholder="请输入手机号"
              clearable
              onChange={e => changeUser("phone", e)} />
          </Form.Item>

          <Form.Item label="昵称">
            <Input
              placeholder="请输入昵称"
              clearable
              onChange={e => changeUser("nickname", e)}
            />
          </Form.Item>

          <Form.Item label="密码" name="password">
            <Input
              placeholder="请输入密码"
              clearable
              type="password"
              onChange={(e) => changeUser("password", e)}
            />
          </Form.Item>

          <div className="text-center">
            <Button color="primary" onClick={() => { doregister(push) }}>注册</Button>
          </div>
        </Form>
      </div>
    );
  };
}
//取数据
const mapStateToProps = (state) => {
  return {
    user: getUser(state),
  };
};
//取方法
const mapDispatchToProps = (dispatch) => {
  return {
    registerFn: bindActionCreators(actions, dispatch),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(register);
